<template>
    <Breadcrumb :datas="[`管理系统`, `壁纸管理`, `壁纸图库`]">
        <el-button type="primary" plain @click="adddrawer.show = true"
            ><el-icon><Plus /></el-icon>新增图库</el-button
        >
    </Breadcrumb>
    <el-table :data="collections">
        <el-table-column label="图库名称" prop="name" />
        <el-table-column label="缩略图">
            <template #default="scope">
                <el-image
                    style="width: 100px; height: 150px"
                    :src="scope.row.thumbnail"
                />
            </template>
        </el-table-column>
        <el-table-column label="所在分类">
            <template #default="scope">
                <el-tag type="primary">可爱萌宠</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="图集列表">
            <template #default="scope">
                <el-link
                    type="primary"
                    @click="
                        router.replace(`/wallpapers/galleries/${scope.row._id}`)
                    "
                >
                    <el-icon>
                        <Link />
                    </el-icon>
                    图集列表
                </el-link>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="right" width="400">
            <template #header>
                <el-input placeholder="请输入搜索关键词" size="large">
                    <template #prepend>
                        <el-select
                            placeholder="所在分类"
                            style="width: 115px"
                            size="large"
                        >
                            <el-option label="Restaurant" value="1" />
                            <el-option label="Order No." value="2" />
                            <el-option label="Tel" value="3" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button type="danger" size="large">搜索</el-button>
                    </template>
                </el-input>
            </template>
            <template #default="scope">
                <el-switch
                    size="large"
                    style="margin-right: 10px"
                    v-model="scope.row.locked"
                    inline-prompt
                    :active-value="1"
                    :inactive-value="0"
                    active-text="启用"
                    inactive-text="禁用"
                ></el-switch>
                <el-button type="primary" plain> 编辑 </el-button>
                <DeleteConfirm :confirm="() => deleteEvent(scope.row._id)" />
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
    <Teleport to="body">
        <AddDrawer :show="adddrawer.show" title="新增图库" :close="closeDrawer">
            <template #body>
                <el-form-item label="图库名称" size="large">
                    <el-input
                        type="text"
                        placeholder="请输入图库名称"
                        size="large"
                        v-model.trim="adddrawer.data.name"
                        :prefix-icon="Notebook"
                    />
                </el-form-item>
                <el-form-item label="所在分类" size="large">
                    <el-select placeholder="请选择所在分类">
                        <el-option
                            v-for="item in 10"
                            :key="item"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图库封面" size="large">
                    <Uploader />
                </el-form-item>
            </template>
            <template #footer>
                <el-space :size="20">
                    <el-button size="large" @click="closeDrawer"
                        >取消</el-button
                    >
                    <el-button size="large" type="primary">确定</el-button>
                </el-space>
            </template>
        </AddDrawer>
    </Teleport>
</template>

<script setup>
import { useRouter } from "vue-router";
import { Plus, Search, Notebook, Link } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import Breadcrumb from "@/components/breadcrumb";
import AddDrawer from "@/components/drawer";
import DeleteConfirm from "@/components/confirm";
import Uploader from "@/components/uploader";

const router = useRouter();
const adddrawer = reactive({
    show: false,
    data: {},
});

const collections = [
    {
        _id: "01",
        name: "可爱猫咪",
        thumbnail: "https://picsum.photos/100/150",
        category: "683c6c922f1c6683497e5c30",
        createAt: "2025/06/15 12:00:00",
        isActive: true,
        collections: ["683c6c922f1c6683497e5c30", "683c6c922f1c6683497e5c31"],
    },
    {
        _id: "02",
        name: "可爱狗狗",
        thumbnail: "https://picsum.photos/100/150",
        category: "683c6c922f1c6683497e5c30",
        createAt: "2025/06/15 12:00:00",
        isActive: true,
        collections: ["683c6c922f1c6683497e5c30", "683c6c922f1c6683497e5c31"],
    },
    {
        _id: "03",
        name: "江湖影视",
        thumbnail: "https://picsum.photos/100/150",
        category: "683c6c922f1c6683497e5c30",
        createAt: "2025/06/15 12:00:00",
        isActive: true,
        collections: ["683c6c922f1c6683497e5c30", "683c6c922f1c6683497e5c31"],
    },
];

// 关闭抽屉
const closeDrawer = () => {
    adddrawer.show = false;
};

// 删除
const deleteEvent = (id) => {
    console.log(id);
};
</script>

<style lang="scss" scoped></style>
